<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1300"  destroy-on-close @closed="$emit('closed')" align-center>
        <!-- <el-button type="primary" @click="print">打印</el-button> -->
        <el-main class="printMain" ref="printMain">
            <div class="title">检验单号: {{test_code}}</div>
            <div class="print_flex">
                <div>品名 {{goods_name}}</div>
                <div v-column="'test.apply_name'">供应商: {{apply_name}}</div>
                <div v-column="'test.dye_name'">染色厂:{{dye_factory_name}}</div>
                <div v-column="'test.process_name'">加工厂:{{process_factory_name}}</div>
            </div>
            <table border="1" style="border-collapse: collapse; width: 100%;margin-bottom: 10px" v-for="(item,index) in table" :key="index">
                <thead>
                    <div style="width: 300px;height: 32px;line-height: 32px;cursor: pointer;color: #569ccb;font-weight: bold;font-size: 18px;padding-left: 10px;" @click="get_code(item)">入库单号: {{item.purchase_ware_code}}</div>
                    <tr style="height:32px;line-height: 32px;">
                        <th class="table_border">花型</th>
                        <th class="table_border" v-for="(item1,index1) in item.color_list" :key="index1">{{item1.name}}</th>
                        <th class="table_border">合计</th>
                        <th class="table_border">地区</th>
                    </tr>
                </thead>
                <tbody> 
                    <tr v-for="(item2,index2) in item.flowers" :key="index2">
                        <td class="table_border">{{item2.flower}}</td>
                        <td class="table_border" v-for="(item1,index1) in item.color_list" :key="index1">{{`${item2.test_obj[item1.name]} / ${item2.ware_obj[item1.name]}`}}</td>
                        <td class="table_border">{{item2.total_ware_number}}</td>
                        <td class="table_border">{{item.area_name}}</td>
                    </tr>
                </tbody>
            </table>
        </el-main>
	</el-dialog>
</template>

<script>
import print from '@/utils/print'
export default {
	emits: ['success', 'closed'],
	data() {
			return {
				dialog: {
					client: false
				},
				mode: "add",
				titleMap: {
					print: '打印',
				},
				visible: false,
                detail: {},
                table: [],
                test_code: "",
                goods_name: "",
                apply_name: "",
                dye_factory_name: "",
                process_factory_name: ""    
			}
		},
	mounted() {
	},
	methods: {
        print(){
            print(this.$refs.printMain)
            setTimeout(()=>{
                this.visible = false
            },500)
        },
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        async setData(data) {
            this.test_code = data.test_code
            this.goods_name = data.goods_name
            this.apply_name = data.apply_name
            this.dye_factory_name = data.dye_factory_name
            this.process_factory_name = data.process_factory_name
            var res = await this.$API.business.inspect.order.print.post({purchase_ware_ids: data.id, is_all: 2});
            this.detail = res.data;
            this.table = res.data.order_detail.map(item=>{
                const newRow = { ...item };
                let sample = []
                let color = item.select_colors.split(',')
                color.map(x=>{
                    sample.push({
                        name: x
                    })
                })
                item.flowers.map(item1=>{
                    item1.ware_obj = {}
                    item1.test_obj = {}
                })
                newRow.color_list = sample
                sample.forEach(col => {
                    newRow.flowers.map(item1=>{
                        item1.ware_obj[col.name] = item1.ware_obj[col.name] || 0;
                        item1.test_obj[col.name] = item1.test_obj[col.name] || 0;
                        item1.color_data.map(item2=>{
                            if(item2.color_name == col.name){
                                item1.ware_obj[col.name] = item2.total_ware_number
                                item1.test_obj[col.name] = item2.use_number
                            }
                        })
                    })
                });
                return newRow;
            })
        },
        get_code(item){
            this.visible = false;
            this.$emit('success', item.purchase_ware_code, item.purchase_ware_id, item.weight)
        },
	}
}
</script>

<style lang="scss" scoped>
.printMain{
    .title {
        font-size: 20px;
        text-align: center;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .print_flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    td{
        text-align: center;
    }
    .table_border{
        width: 100px;
        height: 32px;
    }
    table{
        tbody{
            font-size: 13px;
            tr {
                page-break-inside: avoid;
                -webkit-region-break-inside: avoid; 
            }
            tr:last-child{
                page-break-after: avoid;
                
            }
        }
    } 
}
</style>
